<script setup>
import { getTimeStr } from '@/utils/transIUtils'
import { useRouter, useRoute } from 'vue-router'
import LikeLineIcon from '@/components/svgComponents/LikeLineIcon.vue'
import PostListItemImage from '@/components/PostListItemImage.vue'
import { View, Star, ChatRound } from '@element-plus/icons-vue'
import { reportCancel } from '@/axios/api/posts'
import { ElMessage,ElMessageBox } from 'element-plus'
const props = defineProps({
  data: Object,
  isNoTops: Boolean,
  isEdit: Boolean,
})

const router = useRouter()
const route = useRoute()

const handleClick = () => {
  // 如果路径有post,则去掉post及其后面的内容，否则直接添加post/id
  const path = route.path.replace(/\/post.*/, '')

  // router.push(`${path}/post/${props.data.id}`)
  router.push(`/home/post/${props.data.id}`)
}

const handleEdit = () => {
  router.push(`/editTopic/${props.data.id}?type=${props.data.type}`)
}
const emit = defineEmits(['refetch'])
const withdrawReport = (id) => {
  ElMessageBox.confirm('确定撤销举报吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    reportCancel({ id }).then(res => {
      if (res.code == 0) {
        ElMessage.success('撤销成功')
        emit("refetch")
      } else {
        ElMessage.error('撤销失败')
      }
    })
  })
}
</script>

<template>
  <div class="post-list-item-card border-b-1 border-solid border-[--line-1] py-2">
    <div
      class="bg-[--fill-0] rounded-xl hover:shadow-lg hover:-translate-y-1 hover:bg-[--fill-1] cursor-pointer transition-all p-4 w-full flex gap-4 items-start justify-between">
      <div>
        <div class="flex">
          <PostListItemImage :type="data.type" :media="data.media"
            class="w-[90px] h-[90px] rounded-lg object-cover flex-shrink-0" />
          <section class="flex flex-col flex-1 min-w-0 ml-2">
            <div class="flex items-center gap-2 mb-1">
              <span class="text-slate-900 line-clamp-1"><span class="font-bold">举报原因：</span>{{ data.content }}</span>

              <!-- <span class="text-xs text-gray-400 whitespace-nowrap">{{ getTimeStr(data.createTime) }}</span> -->
            </div>
            <div class="flex items-center gap-2 mb-1">
              <div class="text-slate-900 line-clamp-1"><span class="font-bold">举报时间：</span>{{
                getTimeStr(data.createTime) }}</div>
            </div>
            <div class="text-slate-900 line-clamp-1" v-if="data.type == 1"><span class="font-bold">类型：</span>帖子</div>
            <div class="text-slate-900 line-clamp-1" v-else-if="data.type == 2"><span class="font-bold">类型：</span>评论
            </div>
            <div class="text-slate-900 line-clamp-1" v-else-if="data.type == 3"><span class="font-bold">类型：</span>用户
            </div>
            <div class="text-slate-900 line-clamp-1" v-else-if="data.type == 4"><span class="font-bold">类型：</span>主题
            </div>
          </section>
        </div>
        <div class="text-slate-900 line-clamp-1"><span class="font-bold">单号：</span>{{ data.id }}</div>
        <div class="text-slate-900 line-clamp-1"><span class="font-bold">违规类型：</span>{{ data.violationType }}</div>
      </div>
      <div class="flex flex-col">

        <div class="text-slate-900 line-clamp-1" v-if="data.status == 0">待审核</div>
        <div class="text-slate-900 line-clamp-1" v-else-if="data.status == 1">已处理</div>
        <div class="text-slate-900 line-clamp-1" v-else>已拒绝</div>

        <el-button type="primary" size="small" @click="withdrawReport(data.id)" class="mt-2" v-if="data.status == 0">
          撤回举报
        </el-button>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
.post-list-item-card {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px 0 rgba(56, 112, 255, 0.04);
  transition: box-shadow 0.18s, transform 0.14s;
}

.post-list-item-card:hover {
  box-shadow: 0 8px 28px 0 rgba(56, 112, 255, 0.13);
  background: #fafdff;
}

.premium-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
  border-radius: 12px;
  border: 1px solid #e6c200;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.premium-tag:hover {
  transform: translateY(-1px) translateZ(0);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.premium-tag::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.7;
  filter: blur(1px);
}

.premium-text {
  font-size: 11px;
  font-weight: 600;
  color: #8b4513;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  letter-spacing: 0.5px;
  line-height: 1;
}
</style>
